<template>
  <div>
    <Tabs v-model:activeKey="activeKey" @change="onChangeTabs">
      <Tabs.TabPane
        v-for="item in tabsList"
        :key="item.id"
        :tab="item.itemName"
        @change="onTabs(item.id, item.itemName)"
      ></Tabs.TabPane>
      <template
        #addIcon
        :get-popup-container="
          triggerNode => {
            return triggerNode.parentNode;
          }
        "
      >
        <EllipsisOutlined />
      </template>
      <Tabs.TabPane key="all" tab="综合查询"></Tabs.TabPane>
    </Tabs>
  </div>
</template>
<script setup>
import { ref, defineEmits, onMounted } from 'vue';
import { getOneExamineItem } from '@/api/ruleSetting';
import { EllipsisOutlined } from '@ant-design/icons-vue';
import { Tabs } from 'ant-design-vue';
onMounted(() => {
  getTabsList();
});
let tabsList = ref([]);
// 获取tabs列表
function getTabsList() {
  getOneExamineItem().then(res => {
    tabsList.value = res.data.data;
    if (tabsList.value.length > 0) {
      activeKey.value = tabsList.value[0].id;
      activeName.value = tabsList.value[0].itemName;
      let obj = {
        id: activeKey.value,
        itemName: activeName.value
      };
      emit('onTabsValue', obj);
    } else {
      activeKey.value = 'all';
      activeName.value = '综合查询';
      let obj = {
        id: activeKey.value,
        itemName: activeName.value
      };
      emit('onTabsValue', obj);
    }
    emit('onTabs', activeKey.value, activeName.value);
  });
}
let activeKey = ref('');
let activeName = ref('');
const emit = defineEmits(['onTabsValue', 'onTabs']);
const onChangeTabs = e => {
  let obj = {};
  tabsList.value.forEach(elem => {
    if (elem.id === e) obj = elem;
  });
  console.log(e);
  emit('onTabsValue', obj);
};
function onTabs(activeKey, activeName) {
  emit('onTabs', activeKey.value, activeName.value);
}
</script>

<style lang="scss" scoped></style>
